/* 颜色变量 */
$light-bg-color: #ffffff;
$light-text-color: #333333;
$light-text-gray-color: #999999;
$light-bg-gray-color: #f8f8f8;
page {
  // font-family: "Arial", "Microsoft YaHei", "黑体", "宋体", sans-serif;
    // font-family: "Lucida Console", "Courier New", monospace;
      // font-family: "Times New Roman", Times, serif;
      font-family: -apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif,SimHei,SimSun;
    
  font-size: 24upx;
  background-color: $light-bg-gray-color;
}
.common-nav {
  .search-input {
    position: relative;
    z-index: 99;
    margin-top: -4upx;
    .search-notice {
      position: absolute;
      left: 20upx;
      top: -2upx;
      width: 100%;
    }
  }
}
.tips {
  position: fixed;
  right: 20upx;
  background: $light-bg-color;
  padding: 20upx;
  width: 60vw;
  border-radius: 10upx;
  filter: alpha(opacity=90);
  -moz-opacity: 0.9;
  -khtml-opacity: 0.9;
  opacity: 0.9;
  .tips-content {
    image {
      width: 60upx;
      height: 60upx;
      margin-right: 10upx;
    }
    .title {
      font-size: 22upx;
    }
  }
  &::after {
    position: absolute;
    left: 76%;
    top: -18upx;
    content: "";
    display: block;
    clear: both;
    width: 0;
    height: 0;
    border-width: 10upx;
    border-style: solid;
    border-color: transparent transparent rgba(255, 255, 255, 0.9) transparent;
  }
}
// 热门文章
.hot {
  margin: 20upx;
  .hot-content {
    padding: 20upx 0;
    .title {
      font-size: 26upx;
      font-weight: 600;
      color: $light-text-color;
      image {
        width: 40upx;
        height: 40upx;
        vertical-align: middle;
        margin-top: -10upx;
        margin-right: 6upx;
      }
    }
    .more {
      font-size: 22upx;
      color: $light-text-gray-color;
    }
  }
  .hot-content-scroll {
    padding: 20upx;
    background-color: $light-bg-color;
    white-space: nowrap;
    overflow-y: auto;
    &::-webkit-scrollbar {
      background: none;
      background-color: $light-bg-color;
    }
    .scroll-item {
      position: relative;
      width: 50vw;
      height: 25vw;
      display: inline-block;
      border-radius: 20upx;
      margin-right: 20upx;
      &:nth-last-child(1) {
        margin-right: 0 !important;
      }
      .cover {
        position: absolute;
        left: 0;
        top: 0;
        width: 50vw;
        height: 25vw;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .hot-title {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 5vw;
        width: 100%;
        background-color: #000000;
        filter: alpha(opacity=60);
        -moz-opacity: 0.6;
        -khtml-opacity: 0.6;
        opacity: 0.6;
        border-radius: 0 0 10upx 10upx;

        .title {
          padding: 0 4upx;
          font-weight: normal;
          line-height: 5vw;
          font-size: 20upx;
          color: $light-bg-color;
        }
      }
    }
  }
}

// 公共的
.title-more {
  .title {
    font-size: 26upx;
    font-weight: 600;
    color: $light-text-color;
    image {
      width: 40upx;
      height: 40upx;
      vertical-align: middle;
      margin-top: -10upx;
      margin-right: 6upx;
    }
  }
  .more {
    font-size: 22upx;
    color: $light-text-gray-color;
  }
}
.article-list {
  .item {
    background: $light-bg-color;
    margin: 20upx 0;
    padding: 20upx;
    .a-title {
      font-size: 26upx;
      line-height: 50upx;
      color: #000000;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .nav-item {
      display: flex;
      .cover {
        position: relative;
        width: 40vw;
        height: 20vw;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .info {
        width: calc(60vw - 80upx);
        position: relative;
        padding-left: 20upx;
        .title {
          font-weight: normal;
          font-size: 24upx;
        }
        .brief {
          line-height: 30upx;
          font-size: 24upx;
        }
        .tag-list {
          position: absolute;
          left: 20upx;
          bottom: 34upx;
          .tag {
            margin-right: 6upx;
            background: #8486f8;
            font-size: 18upx;
            color: #ffffff;
            padding: 2upx 4upx;
            border-radius: 2upx;
            &:nth-last-child(1) {
              margin-right: 0 !important;
            }
          }
        }
        .tag-time {
          margin-top: 4upx;
          position: absolute;
          left: 20upx;
          bottom: 0;
          right: 10upx;
          font-size: 20upx;
          color: #666666;
        }
      }
    }
  }
}
// 专题列表
.topic {
  .concern {
    padding: 0 20upx;

    .item {
      background: $light-bg-color;
      margin: 20upx 0;
      padding: 20upx;
      border-radius: 20upx;
      box-sizing: border-box;
      .nav-item {
        width: calc(100vw - 80upx);
        .cover {
          position: relative;
          width: 100%;
          height: 40vw;
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
        .info {
          margin-top: 10upx;
          .title {
            font-size: 24upx;
            font-weight: 600;
            line-height: 36upx;
          }
          .intro {
            margin-top: 10upx;
            line-height: 30upx;
            font-size: 22upx;
          }
          .view-time {
            margin-top: 10upx;
            font-size: 22upx;
            color: #666666;
          }
        }
      }
    }
  }
}

// 专题详情
.topic-detail {
  .concern {
    padding: 0 20upx;
    .item {
      background: $light-bg-color;
      margin: 20upx 0;
      padding: 20upx;
      box-sizing: border-box;
      .nav-item {
        width: calc(100vw - 80upx);
        .cover {
          position: relative;
          width: 100%;
          height: 40vw;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          .tag {
            position: absolute;
            right: 10upx;
            top: 10upx;
            text {
              font-size: 20upx;
              padding: 4upx 10upx;
              line-height: 100%;
              background: #f60;
              color: $light-bg-color;
              margin-left: 4upx;
            }
          }
        }
        .info {
          margin-top: 10upx;
          .title {
            font-size: 24upx;
            font-weight: 600;
            line-height: 36upx;
          }
          .intro {
            margin-top: 10upx;
            line-height: 30upx;
            font-size: 22upx;
          }
        }
      }
    }
  }
  .article-list {
    .item {
      display: flex;
      background: $light-bg-color;
      margin: 20upx 0;
      padding: 20upx;
      width: 100%;

      .nav-item {
        display: flex;
        .cover {
          position: relative;
          width: 38vw;
          height: 19vw;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        }
        .info {
          width: calc(70vw - 130upx);
          position: relative;
          padding-left: 20upx;
          margin-top: 0;
          .title {
            font-size: 24upx;

            font-weight: normal;
          }
          .brief {
            line-height: 30upx;
            font-size: 24upx;
          }
          .tag-list {
            .tag {
              margin-right: 6upx;
            }
          }
          .tag-time {
            margin-top: 4upx;
            position: absolute;
            left: 20upx;
            bottom: 0;
            right: 10upx;
            font-size: 20upx;
            color: $light-text-gray-color;
          }
        }
      }
    }
  }
}

//  发现
.cate-label {
  .search {
    padding: 20upx;
    background: $light-bg-color;
  }
  .cate-list {
    background: $light-bg-color;
    margin-bottom: 20upx;
    padding: 20upx;
    box-sizing: border-box;
    text-align: center;
    .image {
      width: 90upx;
      height: 90upx;
      margin: 0 auto;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .g-title {
      font-size: 24upx;
      font-weight: 600;
      margin-top: 8upx;
      color: #666666;
      text-align: center;
    }
  }
  .cate-container {
    margin: 20upx;

    .label-list {
      padding: 20upx;
      margin-bottom: 20upx;
      background: $light-bg-color;
      .title {
        font-size: 26upx;
        font-weight: 600;
        color: $light-text-color;
        margin-bottom: 20upx;
        image {
          width: 40upx;
          height: 40upx;
          vertical-align: middle;
          margin-top: -10upx;
          margin-right: 6upx;
        }
      }
      .list {
        .item {
          position: relative;
          width: 49%;
          border-radius: 8upx;
          overflow: hidden;
          margin-bottom: 10upx;
          .cover {
            position: relative;
            width: 100%;
            height: 20vw;
            background-size: 100% 100%;
            background-repeat: no-repeat;
            overflow: hidden;
            .cate-title {
              position: absolute;
              left: 10upx;
              top: 10upx;
              font-size: 22upx;
              text {
                border-radius: 4upx;
                padding: 2upx 8upx;
                color: $light-bg-color;
                background: #8486f8;
              }
            }
          }
        }
      }
    }
  }
}
// 我的
.mine {
  .cate {
    margin-top: 20upx;
    background: $light-bg-color;
    padding: 20upx;
    .cate-item {
      text-align: center;
      .title {
        font-weight: 600;
        padding-top: 6upx;
        font-size: 26upx;
        color: #666666;
        text-align: center;
      }
    }
  }
  /* ------------------------- */
  .zr {
    color: white;
    background: #8486f8;
    width: 100%;
    // height: 240upx;
    position: relative;
    padding: 20vw 0 4vw 0;
  }

  .water {
    position: absolute;
    left: 0;
    bottom: -10upx;
    height: 20upx;
    width: 100%;
    z-index: 1;
  }

  .water-c {
    position: relative;
  }

  .water-1 {
    background: url("")
      repeat-x;
    background-size: 600upx;
    background-size: cover;
    animation: wave-animation-1 4.5s infinite linear;
  }

  .water-2 {
    top: 5upx;
    background: url("")
      repeat-x;
    background-size: 600upx;
    background-size: cover;
    animation: wave-animation-2 8s infinite linear;
  }

  .water-1,
  .water-2 {
    position: absolute;
    width: 100%;
    height: 40upx;
  }

  .back-white {
    background: $light-bg-color;
  }

  @keyframes wave-animation-1 {
    0% {
      background-position: 0 top;
    }

    100% {
      background-position: 600upx top;
    }
  }

  @keyframes wave-animation-2 {
    0% {
      background-position: 0 top;
    }

    100% {
      background-position: 600px top;
    }
  }

  .user_box {
    display: flex;
    z-index: 66 !important;
    animation: love 1.5s ease-in-out;
    animation-fill-mode: forwards;
  }

  .userInfo_name {
    flex: 1;
    vertical-align: middle;
    width: 100%;
    margin-left: 5%;
    margin-top: 5%;
    .user-info {
      .user {
        font-size: 36upx;
        font-weight: 600;
      }
      .phone {
        padding-top: 12upx;
        font-size: 22upx;
      }
    }
  }

  .userInfo {
    flex: 1;
    width: 100%;
    border-radius: 50%;
    overflow: hidden;
    max-height: 140upx;
    max-width: 140upx;
    margin-left: 5%;
    margin-top: 5%;
    border: 2px solid $light-bg-color;
    .avatar {
      image {
        width: 140upx;
        height: 140upx;
      }
    }
  }

  .dynamic {
    margin-top: 10upx;
    padding: 20upx 20upx 0;

    .cell {
      border-radius: 20upx;  overflow: hidden;
      .cell-item {
        padding: 20upx;
        background-color: $light-bg-color;
        .image {
          width: 48upx;
          height: 48upx;
          vertical-align: middle;
          margin-right: 20upx;
          image {
            width: 100%;
            height: 100%;
          }
        }
        .title {
          flex: 1;
          font-size: 24upx;
          color: #666666;
          text {
            color: #8486f8;
          }
          button {
            -webkit-tap-highlight-color: transparent;
            background-color: transparent !important;
            border-radius: 0;
            box-sizing: border-box;
            color: #666666;
            cursor: pointer;
            display: block;
            // font-size: 18px;
            line-height: 2.55555556;
            margin-left: auto;
            margin-right: auto;
            font-size: 24upx;
            overflow: hidden;
            padding-left: 0 !important;
            // padding-right: 14px;
            position: relative;
            text-align: left !important;
            text-decoration: none;
            border: 0 !important;
          }
          button::after {
            border: 0 !important;
            border-radius: 10px;
            box-sizing: border-box;
            content: " ";
            height: 200%;
            left: 0;
            position: absolute;
            top: 0;
            -webkit-transform: scale(0.5);
            transform: scale(0.5);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            width: 200%;
            border-top-width: 1px;
            border-right-width: 1px;
            border-bottom-width: 1px;
            border-left-width: 1px;
            border-top-style: solid;
            border-right-style: solid;
            border-bottom-style: solid;
            border-left-style: solid;
            border-top-color: rgba(0, 0, 0, 0.2);
            border-right-color: rgba(0, 0, 0, 0.2);
            border-bottom-color: rgba(0, 0, 0, 0.2);
            border-left-color: rgba(0, 0, 0, 0.2);
            border-image-source: initial;
            border-image-slice: initial;
            border-image-width: initial;
            border-image-outset: initial;
            border-image-repeat: initial;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            border-bottom-left-radius: 10px;
          }
        }
        .arror {
          width: 32upx;
          height: 32upx;
          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .logout {
    text-align: center;
    margin-top: 4vw;
    color: #8486f8;
    font-weight: 600;
    font-size: 26upx;
  }
}
